<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
    <link href="${themePath}/css/element-ui-2.3.7.css" rel="stylesheet">
    <link rel="stylesheet" href="${themePath}/css/animate.css" type="text/css"/>
    <link rel="stylesheet" href="${themePath}/css/phone.css" type="text/css"/>
    <link rel="stylesheet" href="${themePath}/css/PersonalCenter.css" type="text/css"/>
    <script src="${themePath}/js/jquery.min-3.3.1.js"></script>
    <script src="${themePath}/js/vue-2.5.17.js"></script>
    <script src="${themePath}/js/element-ui-2.4.0.js"></script>
    <title>个人中心</title>
    <style>
        header {
            height: 100px;
            text-align: center;
            font-size: 16px;
            font-weight: bold
        }

        .el-icon-success {
            font-size: 80px;
            color: #67c23a
        }

        .el-main {
            text-align: center;
            font-weight: bold
        }

        .el-button--text {
            font-size: 25px;
            font-weight: bold;
            color: #67c23a
        }

        .el-main {
            font-size: 16px
        }

        .div {
            text-align: left;
            width: 70%;
            margin: 0 auto;
        }
    </style>
</head>

<body style="background: #F5F5F5;position: static;margin: 0 auto;">
<div id="app">
    <el-container>
        <el-header></el-header>
        <el-main>
            <i class="el-icon-success"></i><br><br>
            <el-button type="text">下单成功！</el-button>
            <br><br>
            <div class="div">订单号：<span id="orderNum">{{orderNo}}</span></div>
            <div class="div">门票名称：<span id="orderProduct">{{orderProduct}}</span></div>
            <div class="div">金额：￥<span id="orderPrice">{{orderAccunt}}</span></div>
            <el-button type="success" v-on:click="goPayIng()">确定支付</el-button>
        </el-main>
    </el-container>


</div>
</body>
<script>
    var isPaySuccess = false;

    var vm = new Vue({
        el: '#app',
        data: {
            orderNo: "",
            orderProduct: "",
            orderAccunt: '',
            payUrl: ""
        },
        computed: { //计算属性
            aDouble: vm => vm.a * 2
        },
        mounted: function () { //初始化数据
            var _this = this;
            $.ajax({
                type: "post",
                dataType: "json",
                url: "${ctxPath}/fore/order/orderData",
                data: {},
                success: function (data) {
                    _this.orderNo = data.orderNo;
                    _this.orderProduct = data.orderProduct;
                    _this.orderAccunt = data.orderAccunt;
                    _this.payUrl = data.payUrl;
                    console.log(_this.payUrl)
                },
                error: function (jqXHR, textStatus, errorThrown) {

                }
            });
        },
        methods: { //方法
            plus: function () {
                this.a++
            },
            goPayIng() {
                var _this = this;
                if (_this.payUrl == "") {
                    $.alert("网络错误，请刷新页面后支付");
                }
                if (!isPaySuccess) {
                    isPaySuccess = true;
                    console.log(_this.payUrl)
                    window.location.href = _this.payUrl;
                }
            }
        }
    })
</script>

</html>